<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
<c:if test="${sessionScope.loginMember == null }">
	<jsp:forward page="loginPage.sds"></jsp:forward>
</c:if>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>StepUp-Temperature</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

</head>

<body>

	<div id="wrapper">
		<!-- 사이드 메뉴바 -->
		<nav class="navbar-default navbar-static-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="side-menu">
					<li class="nav-header">
						<div class="dropdown profile-element">
							<span>
								<c:if test="${sessionScope.loginMember.mimage == null}">
									<img alt="image" class="img-circle"
									src="imgUpload/anonymous.jpg" width="160px"/>
								</c:if>
								<c:if test="${sessionScope.loginMember.mimage != null}">
									<img alt="image" class="img-circle"
									src="imgUpload/${sessionScope.loginMember.mimage}" width="160px"/>
								</c:if>
							</span> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<span class="clear"> <span class="block m-t-xs"> <strong
										class="font-bold">${sessionScope.loginMember.mname}</strong>
								</span> <span class="text-muted text-xs block">
									${sessionScope.loginMember.mposition}
								<b class="caret"></b>
								</span>
							</span>
							</a>
							<ul class="dropdown-menu animated fadeInRight m-t-xs">
								<li><a href="stepup_profile.sds">Profile</a></li>
								<li class="divider"></li>
								<li><a href="logout.sds">Logout</a></li>
							</ul>
						</div>
					</li>

					<!-- 메뉴 리스트 -->
					<li><a href="index.sds"><i
							class="fa fa-bar-chart-o"></i> <span class="nav-label">Statistics</span></a></li>
					<li><a href="stepup_rank.sds"><i class="fa fa-flask"></i>
							<span class="nav-label">Ranking</span></a></li>
					<li><a href="stepup_badge.sds"><i class="fa fa-desktop"></i>
							<span class="nav-label">Badge</span></a></li>
					<li><a href="stepup_mission.sds"><i
							class="fa fa-envelope"></i> <span class="nav-label">Mission</span></a></li>
					<li class="active"><a href="stepup_temp.sds"><i class="fa fa-sitemap"></i>
							<span class="nav-label">Thermometer</span></a></li>
					<li><a href="stepup_donation.sds"><i class="fa fa-globe"></i>
							<span class="nav-label">Donation</span></a></li>
				</ul>

			</div>
		</nav>

		<div id="page-wrapper" class="gray-bg">
			<!-- 상단 검색 및 로그아웃 메뉴 -->
			<div class="row border-bottom">
				<nav class="navbar navbar-static-top" role="navigation"
					style="margin-bottom: 0">
					<div class="navbar-header">
						<a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
							href="#"><i class="fa fa-bars"></i> </a>
						<form role="search" class="navbar-form-custom" method="post"
							action="search_results.html">
							<div class="form-group">
								<input type="text" placeholder="Search for something..."
									class="form-control" name="top-search" id="top-search">
							</div>
						</form>
					</div>
					<ul class="nav navbar-top-links navbar-right">
						
						<!-- 로그아웃 버튼 -->
						<c:if test="${sessionScope.loginMember != null}">
							<li><a href="stepup_profile.sds"><i class="fa fa-sign-out"></i>
								Profile
							</a></li>
							<li><a href="logout.sds"> <i class="fa fa-sign-out"></i>
								Logout
							</a></li>
						</c:if>
					</ul>
				</nav>
			</div>

			<!-- 온도계 시작 -->
			<div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-lg-10">
					<h2>따뜻한 온도계</h2>
					<ol class="breadcrumb">
						<li>Home</li>
						<li class="active"><strong>온도계</strong></li>
					</ol>
				</div>
				<div style="padding: 20px 30px 0px 0px">
					<img alt="image" class="img-responsive" src="img/logo.jpg"
					 style="Height: 80px; width: 80px;" align="right"  >
				</div>
				<div class="col-lg-2"></div>
			</div>
			<div class="wrapper wrapper-content animated fadeIn">
				<div class="row">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<h5>
									온도계 <small> : 미션 달성 수에 따른 온도계의 온도를 보여줍니다.</small>
								</h5>
								<!-- <div class="ibox-tools">
									<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
									</a> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
										<i class="fa fa-wrench"></i>
									</a> <a class="close-link"> <i class="fa fa-times"></i>
									</a>
								</div> -->
							</div>
							<div class="ibox-content text-center css-animation-box">
								<h1 class="text-navy">Thermometer</h1>
								<!-- <p>A cross-browser library of CSS animations. Animation.css
									is a bunch of cool, fun, and cross-browser animations for you
									to use in your projects. Great for emphasis, home pages,
									sliders, and general just-add-water-awesomeness.</p> -->

								<div class="hr-line-dashed"></div>

								<div class="row">
									<div class="col-sm-6 text-center">

										<!-- <h4 class="m-b-lg">Example box for animation effect.</h4> -->

										<div id="animation_box" class="animated">
											<p class="animation-text-info">Achievement of Thermometer</p>
											<div class="text-center wrapper-content animation-text-box">
												<h1 id="mytemp"></h1>
												<!-- <p>Sales marketing</p> -->
											</div>
											<div id="rickshaw_multi" class="rickshaw_graph"></div>
										</div>
									</div>
									<div class="col-lg-6 animation-efect-links text-center">
										<h4 class="m-b-lg"><br/>온도계 규칙</h4>

										<!-- <a href="#" class="btn btn-white animation_select"
											data-animation="fadeInUp">fadeInUp</a> <a href="#"
											class="btn btn-white animation_select"
											data-animation="fadeInUpBig">fadeInUpBig</a> -->
										<div align="left">
											
											<p></p>
											<p>- 따뜻한 온도계는 층을 오르면서 NFC를 태그하거나<br/> &nbsp; 만보기를 10번 흔들면 올라갑니다. </p>
											<p>- 따뜻한 온도계가 100℃를 달성할때마다 팥이 적립됩니다.</p>
											<p>- '팥 1개 = 100원' 을 의미합니다.</p>
											<p>- 팥이 적립되면 온도계는 0℃로 초기화됩니다.</p>
											<p>- 모으신 팥의 개수는 Donation 메뉴에서 확인하실 수 있습니다.</p>
											<p>- 모으신 팥은 Donation 메뉴에서 기부하실 수 있습니다.</p>

										</div>
									</div>
								</div>

							</div>
						</div>
					</div>

				</div>
			</div>

			<!-- 하단 부분 -->
			<div class="footer">
				<div align="right">
						StepUp System. Copyright <strong> &copy; SHINHAN DATA SYSTEM.</strong> All Right Reserved. 2015.
					</div>
			</div>

		</div>
	</div>



	<!-- Mainly scripts -->
	<script src="js/jquery-2.1.1.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

	<!-- Peity -->
	<script src="js/plugins/peity/jquery.peity.min.js"></script>

	<!-- Custom and plugin javascript -->
	<script src="js/inspinia.js"></script>
	<script src="js/plugins/pace/pace.min.js"></script>

	<!-- Rickshaw -->
	<script src="js/plugins/rickshaw/vendor/d3.v3.js"></script>
	<script src="js/plugins/rickshaw/rickshaw.min.js"></script>


	<script>
		$(document).ready(function() {
			$('.animation_select').click(function() {
				$('#animation_box').removeAttr('class').attr('class', '');
				var animation = $(this).attr("data-animation");
				$('#animation_box').addClass('animated');
				$('#animation_box').addClass(animation);
				return false;
			});

			var graph2 = new Rickshaw.Graph({
				element : document.querySelector("#rickshaw_multi"),
				renderer : 'area',
				width : 50,
				height : 300,
				max : 100,
				stroke : true,
				series : [ {
					data : [ {
						x : 0,
						y : ("${requestScope.temperature}"*1)
					}, {
						x : 1,
						y : ("${requestScope.temperature}"*1)
					}, {
						x : 2,
						y : ("${requestScope.temperature}"*1)
					} ],
					color : '#eb5463',
					stroke : '#eb5463'
				}, {
					data : [ {x : 0,y : 100},
					         {x : 1,y : 100},
					         {x : 2,y : 100} ],
					color : '#ffd6e5',
					stroke : '#ffd6e5'
				} ]
			});
			graph2.renderer.unstack = true;
			graph2.render();
			$("#mytemp").append("${requestScope.temperature}"+"℃");
		});
	</script>

</body>

</html>
